<template>
    <div class="main">
      <a-form-model class="user-layout-login" @keyup.enter.native="handleSubmit">
        <a-tabs :activeKey="customActiveKey" :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"  @change="handleTabClick">
          <a-tab-pane key="tab1"  tab="">
            <login-account ref="alogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-account>
          </a-tab-pane>
  
  <!--        <a-tab-pane key="tab2" tab="手机号登录">
            <login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>
          </a-tab-pane>-->
        </a-tabs>
  
  
        <a-form-item style="margin-top:8px">
          <a-button size="large"  type="primary"  htmlType="submit"  class="login-button"  :loading="loginBtn"  @click.stop.prevent="handleSubmit" :disabled="loginBtn">确定
          </a-button>
        </a-form-item>
  
      </a-form-model>
  
      <two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>
      <login-select-tenant ref="loginSelect" @success="loginSelectOk"></login-select-tenant>
      <third-login ref="thirdLogin"></third-login>
    </div>
  </template>
  
  <script>
  import Vue from 'vue'
  import { ACCESS_TOKEN, ENCRYPTED_STRING } from '@/store/mutation-types'
  import ThirdLogin from './third/ThirdLogin'
  import LoginSelectTenant from './LoginSelectTenant'
  import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
  import { getEncryptedString } from '@/utils/encryption/aesEncrypt'
  import { timeFix } from '@/utils/util'
  
  import LoginAccount from './LoginAccount'
  import LoginPhone from './LoginPhone'
  
  export default {
      components: {
        LoginSelectTenant,
        TwoStepCaptcha,
        ThirdLogin,
        LoginAccount,
        LoginPhone
      },
      data () {
        return {
          customActiveKey: 'tab1',
          rememberMe: true,
          loginBtn: false,
          requiredTwoStepCaptcha: false,
          stepCaptchaVisible: false,
          encryptedString:{
            key:"",
            iv:"",
          },
        }
      },
      created() {
        Vue.ls.remove(ACCESS_TOKEN)
        this.getRouterData();
        this.rememberMe = true
      },
      methods:{
        handleTabClick(key){
          this.customActiveKey = key
        },
        handleRememberMeChange(e){
          this.rememberMe = e.target.checked
        },
        /**跳转到登录页面的参数-账号获取*/
        getRouterData(){
          this.$nextTick(() => {
            let temp = this.$route.params.username || this.$route.query.username || ''
            if (temp) {
              this.$refs.alogin.acceptUsername(temp)
            }
          })
        },
  
        //登录
        handleSubmit () {
          this.loginBtn = true;
          if (this.customActiveKey === 'tab1') {
            // 使用账户密码登录
            this.$refs.alogin.handleLogin(this.rememberMe)
          } else {
            //手机号码登录
            this.$refs.plogin.handleLogin(this.rememberMe)
          }
        },
        // 校验失败
        validateFail(){
          this.loginBtn = false;
        },
        // 登录后台成功
        requestSuccess(loginResult){
          this.$refs.loginSelect.show(loginResult)
        },
        //登录后台失败
        requestFailed (err) {
          let description = ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试"
          this.$notification[ 'error' ]({
            message: '登录失败',
            description: description,
            duration: 4,
          });
          //账户密码登录错误后更新验证码
          if(this.customActiveKey === 'tab1' && description.indexOf('密码错误')>0){
            this.$refs.alogin.handleChangeCheckCode()
          }
          this.loginBtn = false;
        },
        loginSelectOk(){
          this.loginSuccess()
        },
        //登录成功
        loginSuccess () {
          this.$router.push({ path: "/dashboard/analysis" }).catch(()=>{
            console.log('登录跳转首页出错,这个错误从哪里来的')
          })
          this.$notification.success({
            message: '欢迎',
            description: `${timeFix()}，欢迎回来`,
          });
        },
  
        stepCaptchaSuccess () {
          this.loginSuccess()
        },
        stepCaptchaCancel () {
          this.Logout().then(() => {
            this.loginBtn = false
            this.stepCaptchaVisible = false
          })
        },
        //获取密码加密规则
        getEncrypte(){
          var encryptedString = Vue.ls.get(ENCRYPTED_STRING);
          if(encryptedString == null){
            getEncryptedString().then((data) => {
              this.encryptedString = data
            });
          }else{
            this.encryptedString = encryptedString;
          }
        }
  
      }
  
    }
  </script>
  <style lang="less" scoped>
    .user-layout-login {
      label {
        font-size: 14px;
      }
    .getCaptcha {
        display: block;
        width: 100%;
        height: 40px;
      }
  
    .forge-password {
        font-size: 14px;
      }
  
      button.login-button {
        padding: 0 15px;
        font-size: 16px;
        height: 40px;
        width: 100%;
      }
  
    .user-login-other {
        text-align: left;
        margin-top: 24px;
        line-height: 22px;
  
      .item-icon {
          font-size: 24px;
          color: rgba(0,0,0,.2);
          margin-left: 16px;
          vertical-align: middle;
          cursor: pointer;
          transition: color .3s;
  
        &:hover {
            color: #0066cc;
          }
        }
  
      .register {
          float: right;
        }
      }
    }
  </style>
  <style>
    .valid-error .ant-select-selection__placeholder{
      color: #f5222d;
    }
    
  </style>